<template>
  <view class="info-page">
    <u-navbar
      title="个人信息"
      :autoBack="true"
      bgColor="#fff"
    />
    
    <view class="info-content">
      <!-- 头像设置 -->
      <view class="avatar-section">
        <view class="avatar-wrapper" @click="changeAvatar">
          <image 
            :src="userInfo.avatar || '/static/icons/default-avatar.png'" 
            class="avatar-image" 
            mode="aspectFill"
          />
          <view class="avatar-edit">
            <u-icon name="camera" color="#fff" size="24" />
          </view>
        </view>
        <text class="avatar-tip">点击更换头像</text>
      </view>
      
      <!-- 基本信息 -->
      <view class="info-section">
        <view class="section-title">基本信息</view>
        <u-form ref="form" :model="userInfo" label-width="160rpx">
          <u-form-item label="昵称" prop="nickname">
            <u-input 
              v-model="userInfo.nickname" 
              placeholder="请输入昵称"
              maxlength="20"
            />
          </u-form-item>
          
          <u-form-item label="性别" prop="gender">
            <u-radio-group v-model="userInfo.gender">
              <u-radio label="male">男</u-radio>
              <u-radio label="female">女</u-radio>
              <u-radio label="secret">保密</u-radio>
            </u-radio-group>
          </u-form-item>
          
          <u-form-item label="生日" prop="birthday">
            <u-datetime-picker
              v-model="userInfo.birthday"
              mode="date"
              :show="showBirthdayPicker"
              @confirm="birthdayConfirm"
              @cancel="showBirthdayPicker = false"
            />
            <view @click="showBirthdayPicker = true">
              <u-input 
                v-model="formatBirthday" 
                placeholder="请选择生日"
                readonly
              />
            </view>
          </u-form-item>
          
          <u-form-item label="个性签名" prop="bio">
            <u-textarea 
              v-model="userInfo.bio" 
              placeholder="介绍一下自己吧"
              maxlength="100"
              height="120"
            />
          </u-form-item>
        </u-form>
      </view>
      
      <!-- 伴侣信息 -->
      <view class="info-section" v-if="userInfo.partner">
        <view class="section-title">伴侣信息</view>
        <view class="partner-info">
          <image 
            :src="userInfo.partner.avatar || '/static/icons/default-avatar.png'" 
            class="partner-avatar" 
            mode="aspectFill"
          />
          <view class="partner-details">
            <text class="partner-name">{{ userInfo.partner.nickname }}</text>
            <text class="together-days">在一起 {{ togetherDays }} 天</text>
          </view>
        </view>
      </view>
      
      <!-- 保存按钮 -->
      <view class="save-section">
        <custom-button
          text="保存修改"
          type="primary"
          size="large"
          :loading="saving"
          @click="saveInfo"
        />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import CustomButton from '@/components/custom-button/index.vue'

export default {
  name: 'ProfileInfo',
  components: {
    CustomButton
  },
  data() {
    return {
      userInfo: {
        nickname: '',
        gender: 'secret',
        birthday: '',
        bio: '',
        avatar: '',
        partner: null
      },
      showBirthdayPicker: false,
      saving: false
    }
  },
  computed: {
    ...mapState(useUserStore, ['user']),
    formatBirthday() {
      if (!this.userInfo.birthday) return ''
      const date = new Date(this.userInfo.birthday)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
    },
    togetherDays() {
      if (!this.userInfo.partner || !this.userInfo.partner.bindingDate) return 0
      const bindingDate = new Date(this.userInfo.partner.bindingDate)
      const today = new Date()
      return Math.floor((today - bindingDate) / (1000 * 60 * 60 * 24))
    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {
    ...mapActions(useUserStore, ['updateUserInfo']),
    
    loadUserInfo() {
      // 模拟加载用户信息
      this.userInfo = {
        nickname: '小可爱',
        gender: 'female',
        birthday: '2000-01-01',
        bio: '喜欢美食和浪漫的小仙女',
        avatar: '',
        partner: {
          nickname: '大笨蛋',
          avatar: '',
          bindingDate: '2024-01-01'
        }
      }
    },
    
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.userInfo.avatar = res.tempFilePaths[0]
        }
      })
    },
    
    birthdayConfirm(e) {
      this.userInfo.birthday = e.value
      this.showBirthdayPicker = false
    },
    
    async saveInfo() {
      if (!this.userInfo.nickname.trim()) {
        uni.showToast({ title: '请输入昵称', icon: 'none' })
        return
      }
      
      this.saving = true
      try {
        await this.updateUserInfo(this.userInfo)
        uni.showToast({ title: '保存成功', icon: 'success' })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      } finally {
        this.saving = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.info-page {
  min-height: 1334rpx;
  background: #f5f5f5;
}

.info-content {
  padding: 24rpx;
}

.avatar-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 60rpx 0;
  margin-bottom: 24rpx;
  text-align: center;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 16rpx;
}

.avatar-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 48rpx;
  height: 48rpx;
  background: #ff4757;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid #fff;
}

.avatar-tip {
  font-size: 24rpx;
  color: #999;
}

.info-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 32rpx;
}

.partner-info {
  display: flex;
  align-items: center;
   margin-right: 24rpx; &:last-child { margin-right: 0; }
}

.partner-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.partner-details {
  display: flex;
  flex-direction: column;
}

.partner-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.together-days {
  font-size: 24rpx;
  color: #999;
}

.save-section {
  padding: 40rpx 0;
}
</style>